<template>
	<view>
		<view >
		        <search preholder="搜索附近位置" @toSearch="toSearchFun"></search>
		        <search preholder="搜索附近位置2" :isToAll="isToAll" :themeColor="themeColor" @toSearch="toSearchFun" @toAll="toAllFun"></search>
		    </view>
		
		
	<!-- 	<view style="display: flex;">
			<view>
				<uni-easyinput v-model="keywords " placeholder="处处闻" />
			</view>
			<view class="test" @click="getSongsList">
				<text>搜索</text>
			</view>
		</view>
		<uni-card>
			<view class="hotsText" v-for="(item,index) in hotsSongs" @click="setInput(item.first)">
				<text>{{index +1}}{{item.first}}</text>
			</view>
		</uni-card> -->
	</view>
</template>

<script>
	import search from '@/components/ay-search/search.vue';
	export default {
		components: {
			search
		},
		data() {
			return {
				themeColor: '#33CCCC',
				isToAll: true,
				songsList: '',
				keywords: '',
				hotsSongs: []
			}
		},
		onLoad() {
			this.getSearchHot()
		},
		methods: {
 toSearchFun(e) {

            },
            toAllFun(){

            },
			// 点击热搜文字 将文字放到输入框
			setInput(name) {
				this.keywords = name
			},
			// 获取热搜
			async getSearchHot() {
				const {
					data: res
				} = await this.$request({
					url: '/search/hot',

				})
				console.log(res)
				this.hotsSongs = res.result.hots
			},
			//		<!-- 获取搜索歌曲列表 -->
			async getSongsList() {
				const {
					data: res
				} = await this.$request({
					url: '/search',
					data: {
						keywords: this.keywords
					}
				})
				this.songsList = res.result.songs
				console.log(res)
			},
			// 搜索提示
			searchTips(key, time) {
				console.log(2)
				let t = null

				if (t !== null) {
					clearTimeout(t)
				}
				t = setTimeout(async () => {
					const {
						data: res
					} = await this.$request({
						url: '/search/suggest',
						data: {
							keywords: key,
						}
					})
					console.log(3)
					console.log(res)
				}, time)


			}
		},
		watch: {
			// 监听搜索框数据变化 给出搜索建议/提示
			keywords(newVal, oldVal) {
				if (newVal === '') {
					console.log('空')
					return
				}
				console.log(1)
				this.searchTips(newVal, 500)



			}
		}
	}
</script>

<style>

</style>
